<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header" :style="{ background: pageConfig.headerBgColor, color: pageConfig.headerColor }">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn :color="pageConfig.backColor"></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_order[pageConfig.headerTitleKey] }}</view>
				<view></view>
			</view>
		</view>

		<mescroll-body height="calc(100vh - 98rpx - var(--status-bar-height))" ref="mescrollRef" @init="mescrollInit"
			@down="downCallback" @up="upCallback">
			<view>
				<!-- 状态信息 -->
				<view v-if="isCollage" class="u-p-t-8 u-p-b-20">
					<view class="collage-card">
						<view class="u-text-center u-f-30 u-lh-42">还差{{ collageLackCount }}人 剩<x-counttime :time="collageInfo.endTime" format="D+ H+:m+:s+"></x-counttime></view>
						<view class="flex-center-center u-p-t-18">
							<view class="flex-center-between">
								<view
								v-for="(item, index) in pinUserList"
								:key="index" @click="changeAction(item)">
									<view :class="['u-avatar-84 clear-flex', index ? 'u-m-l-34' : '']">
										<x-image :src="item.isEmpty ? item.avatar : showImage(item.avatar, 'logo')"/>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<order-status-card v-else :info="dataInfo"></order-status-card>
				
				<!-- 用户信息 -->
				<view class="flex bg-white user-card">
					<image src="@/static/image/order/position_black.png" style="width: 36rpx; height: 36rpx"
						class="clear-flex"></image>

					<view class="u-m-l-18 flex-center-between" style="width: 100%;">
						<view>
							<view class="u-lh-34 font-bold">{{ addressObj.name || ''}} {{ addressObj.mobile || '' }}
							</view>
							<view class="u-m-t-12 u-f-24 u-lh-34 color-grew">{{ formatAddress(addressObj) }}</view>
						</view>
						<!-- <view class="flex-center">
							<view class="u-m-r-12 u-f-24 u-lh-34">{{ lang_common.modify }}</view>
							<u-icon name="right" custom-prefix="u" size="12" color="#A9A9A9"></u-icon>
						</view> -->
					</view>
				</view>

				<!-- 商品卡片 -->
				<view>
					<view v-for="(item, index) in dataInfo && dataInfo.itemList || []" :key="index">
						<view v-if="[5, 7].includes(item.goodsType)">
							<coupon-card :item="({ ...item, couponType: 3 })"></coupon-card>
						</view>
						<goods-card v-else :item="dealItem({ ...item })" :score="dataInfo.payType === 1"></goods-card>
					</view>
					<view v-if="dataInfo.preSaleInfo" class="u-p-t-10">
						<view style="padding: 10rpx 30rpx;width: 100%;" class="bg-white flex-center-between ">
							<view></view>
							<view>{{ dataInfo.preSaleInfo || '' }}</view>
						</view>
					</view>
				</view>

				<!-- 快递信息 -->
				<view class="u-m-t-10 bg-white" style="padding: 32rpx 30rpx 38rpx 36rpx;">
					<view class="flex-center-between">
						<view>快递信息</view>
						
						<view class="flex-center">
							<view
								:class="['u-f-28 u-lh-40  u-m-r-12', dataInfo.logisticsPrice ? 'color-red font-medio' : 'color-grew']">
								{{ dataInfo.payType === 1 ? `${ dataInfo.logisticsIntegral || 0 }${ lang_common.score }` : dataInfo.logisticsPrice ? `${ lang_unit.money + dataInfo.logisticsPrice }` : lang_goods.freeShip }}
							</view>
						</view>
					</view>
					
					<view v-if="dataInfo.logisticsCompanyName" class="flex-center-between u-m-t-10">
						<view>物流公司</view>
						
						<view>{{ dataInfo.logisticsCompanyName || '' }}</view>
					</view>
					
					<view v-if="dataInfo.logisticsNumber" class="flex-center-between u-m-t-10">
						<view>物流单号</view>
						
						<view>{{ dataInfo.logisticsNumber || '' }}</view>
					</view>
				</view>

				<!-- 消费获得 -->
				<!-- <view
				class="flex-center-between u-m-t-10 bg-white"
				style="padding: 32rpx 54rpx 38rpx 36rpx;">
					<view>{{ lang_order.consumeGet }}</view>
					
					<view class="u-f-28 u-lh-40 font-medio">{{ 0 }}{{ lang_common.score }}</view>
				</view> -->

				<!-- 实际付款 -->
				<view v-if="dataInfo.orderStatus > 0" class="flex-center-between u-m-t-10 bg-white" style="padding: 32rpx 40rpx 38rpx 36rpx;">
					<view></view>

					<view class="u-f-28 u-lh-40 font-medio flex-center">
						<view class="u-m-r-22 u-f-24 u-lh-34 font-medio">{{ lang_goods.finalPayAmount }}:</view>

						<view class="u-m-r-35u-f-40 u-lh-34 font-bold color-red">
							<template v-if="dataInfo.payType === 1">
								{{ dataInfo.totalPayIntegral || 0 }}{{ lang_common.score }}
							</template>
							<template v-else>
								{{ lang_unit.money }}{{ dataInfo.totalPayAmount || 0 }}
							</template>
						</view>
					</view>
				</view>

				<!-- 备注信息 -->
				<view v-if="dataInfo.remark" class="bg-white u-m-t-10" style="padding: 32rpx 40rpx 38rpx 36rpx;">
					<view class="u-f-28 u-lh-40">{{ lang_order.remarkInfo }}</view>
					<view class="u-m-t-8 u-f-26 u-lh-36">{{ dataInfo.remark || '' }}</view>
				</view>

				<!-- 订单信息 -->
				<order-status-info :info="dataInfo"></order-status-info>
			</view>
		</mescroll-body>

		<!-- 底部操作栏 -->
		<x-fixed-bottom>
			<view class="flex-center-between u-p-28">
				<view class="u-text-center" @click="changeCallAction">
					<image src="@/static/image/order/contact_black.png" style="width: 48rpx; height: 48rpx;"
						class="clear-flex"></image>
					<view class="u-p-t-10 u-f-20 u-lh-26 color-grew">{{ lang_common.contactCustomer }}</view>
				</view>

				<order-status-button :item="dataInfo" @change="buttonAction"></order-status-button>
			</view>
		</x-fixed-bottom>

		<!-- 按钮操作 -->
		<order-deal v-model="visible" :type="typeKey" :order-number="orderNumber" @change="changeDeal"></order-deal>
		<x-pay-select v-model="selectVisible" :info="dataInfo" @change="changeSelect"></x-pay-select>
		<x-share v-model="shareVisible"></x-share>
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import {
		payAction
	} from '@/utils/pay.js'
	import {
		orderInfo,
		orderCancel,
		orderPinInfo
	} from '@/api/user/order.js'
	import OrderSendback from './components/order-sendback.vue'
	import OrderStatusCard from './components/order-status-card.vue'
	import OrderStatusInfo from './components/order-status-info.vue'
	import OrderStatusButton from './components/order-status-button.vue'
	
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			OrderSendback,
			OrderStatusCard,
			OrderStatusInfo,
			OrderStatusButton
		},
		data() {
			return {
				orderNumber: '',
				dataInfo: {},
				collageInfo: {},

				addressObj: {},

				visible: false,
				typeKey: '',

				selectVisible: false,
				
				shareVisible: false,
				defaultUser: { avatar: require('@/static/image/common/add_red.png'), isEmpty: true },
				
				settingValue: ''
			}
		},
		computed: {
			isCollage() {
				let { orderStatus, orderType } = this.dataInfo
				return orderStatus === 1 && orderType === 4
			},
			pageConfig() {
				return this.isCollage ? ({
					backColor: '',
					headerBgColor: '#FFFFFF',
					headerColor: '#333333',
					headerTitleKey: 'waitCollage'
				}) : ({
					backColor: 'white',
					headerBgColor: 'linear-gradient(to right, #F94404 0%, #FD164F 100%)',
					headerColor: '#FFFFFF',
					headerTitleKey: 'detail'
				})
			},
			pinUserList() {
				let { pinUserList, limitNum } = this.collageInfo
				let max = limitNum || 0
				let list = []
				for (let i = 0; i < max; i++) {
					list.push(pinUserList[i] || this.defaultUser)
				}
				return list 
			},
			collageLackCount() {
				let { pinUserList, limitNum } = this.collageInfo
				return (limitNum || 0) - (pinUserList || []).length
			}
		},
		onLoad({
			orderNumber
		}) {
			this.orderNumber = orderNumber
		},
		methods: {
			async changeCallAction() {
				this.settingValue = await this.callAction(this.contactPhone)
			},
			// 按钮触发后
			buttonAction(item) {
				let { key } = item
				this.typeKey = key
				if (key === 'toPay') {
					this.selectVisible = true
				} else if (key === 'inviteFriend') {
					this.shareVisible = true
				} else {
					this.visible = true
				}
			},
			// 点击确定后
			changeSelect(type) {
				payAction(type, this.orderNumber).finally(() => {
					this.downCallback()
				})
			},
			// 弹窗触发回调
			changeDeal() {
				if (this.typeKey === 'cancelOrder') {
					this.jumpBack()
				} else {
					this.downCallback()
				}
			},
			// 拼团卡片
			initCollageInfo() {
				orderPinInfo({ orderNumber: this.orderNumber }).then((data) => {
					this.collageInfo = {...data}
				})
			},
			// 点击列表子项
			changeAction(item) {
				if (item.isEmpty) {
					this.shareVisible = true
				} else {
					this.jumpUrl(`/pages/user/personal/index/index?userId=${ item.userId }`)
				}
			},
			// 处理内容
			dealItem(item) {
				let {
					finalPrice,
					stockSpecs,
					goodsName,
					goodsImage
				} = item
				return ({
					...item,
					orderType: item.orderType,
					discountPrice: finalPrice,
					specs: stockSpecs,
					title: goodsName,
					imgUrl: goodsImage
				})
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let node = this.$refs['mescrollRef']
				if (page.num !== 1) {
					node && node.mescroll.endSuccess(10);
					return
				}
				this.dataInfo = { orderStatus: this.dataInfo.orderStatus, orderType: this.dataInfo.orderType }
				orderInfo({
					orderNumber: this.orderNumber
				}).then(result => {
					node && node.mescroll.endSuccess(10);
					let obj = result || {}
					this.dataInfo = { ...obj, itemList: obj.itemList || [], orderNumber: this.orderNumber }
					this.addressObj = {
						...obj.orderAddress
					}
					if (obj.orderType === 4) {
						this.initCollageInfo()
					}
				}).catch(() => {
					node && node.mescroll.endErr();
				})
			},
			downCallback() {
				let node = this.$refs['mescrollRef']
				node && node.mescroll.resetUpScroll()
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-container /deep/ .u-drawer-bottom,
	.page-container /deep/ .u-mode-center-box {
		background: transparent
	}
	
	.header {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 10200;
		color: #FFFFFF;
		border: 0;
	}
	
	.collage-card {
		padding: 14rpx 0 24rpx;
		background-color: #FFFFFF;
	}

	.user-card {
		position: relative;
		transform: translateY(-14rpx);
		padding: 42rpx 30rpx 42rpx 40rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		background-color: #FFFFFF;
	}
</style>
